import React,{useState} from 'react'


// 父子更复杂
interface Props{
    initialUserName:string;
    editingName:String;
    onNameUpdated:()=>any;
    onEditingNameUpdated:(newEditing:String)=>any;
    disabled:boolean;
}


const NameEditComponent:React.FC<Props>=(props)=>{
    const onChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
        props.onEditingNameUpdated(e.target.value)
    }
    const onNameSubmit=()=>{
        props.onNameUpdated()
    }
    return(
        <>
        <label>Upated name:</label>
        <input 
        value={props.editingName} 
        onChange={onChange}
        />
        <button onClick={onNameSubmit} 
        disabled={props.disabled}
        >change</button>
        </>
    )
}
export default NameEditComponent